<template>
    <el-card>
        <el-form :inline="true" :model="queryForm" @keyup.enter="getDataList()">
            <#list queryList as field>
                <el-form-item>
                    <#if field.queryFormType == 'text' || field.queryFormType == 'textarea' || field.queryFormType == 'editor'>
                        <el-input v-model="queryForm.${field.attrName}"
                                  placeholder="${field.fieldComment!}"></el-input>
                    <#elseif field.queryFormType == 'select'>
                        <#if field.formDict??>
                            <fast-select v-model="queryForm.${field.attrName}" dict-type="${field.formDict}"
                                         placeholder="${field.fieldComment!}" clearable></fast-select>
                        <#else>
                            <el-select v-model="queryForm.${field.attrName}" placeholder="${field.fieldComment!}">
                                <el-option label="选择" value="0"></el-option>
                            </el-select>
                        </#if>
                    <#elseif field.queryFormType == 'radio'>
                        <#if field.formDict??>
                            <fast-radio-group v-model="queryForm.${field.attrName}"
                                              dict-type="${field.formDict}"></fast-radio-group>
                        <#else>
                            <el-radio-group v-model="queryForm.${field.attrName}">
                                <el-radio :label="0">单选</el-radio>
                            </el-radio-group>
                        </#if>
                    <#elseif field.queryFormType == 'date'>
                        <el-date-picker
                                v-model="queryForm.${field.attrName}"
                                type="daterange"
                                value-format="YYYY-MM-DD">
                        </el-date-picker>
                    <#elseif field.queryFormType == 'datetime'>
                        <el-date-picker
                                v-model="queryForm.${field.attrName}"
                                type="datetimerange"
                                value-format="YYYY-MM-DD HH:mm:ss">
                        </el-date-picker>
                    <#else>
                        <el-input v-model="queryForm.${field.attrName}"
                                  placeholder="${field.fieldComment!}"></el-input>
                    </#if>
                </el-form-item>
            </#list>
            <el-form-item>
                <el-button @click="getDataList()">
                    {{ZHtranslate.pl_stdcx.zh}}<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.pl_stdcx.bo}}</p>
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addOrUpdateHandle()">
                    新增<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.pl_stdcx.bo}}</p>
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" @click="deleteBatchHandle()">
                    删除<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.pl_stdcx.bo}}</p>
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="info" @click="importDialogVisible = true">
                    导入<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.pl_stdcx.bo}}</p>
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="info" @click="handleExport()">
                    导出<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.pl_stdcx.bo}}</p>
                </el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="dataListLoading" :data="dataList" border style="width: 100%"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
            <#list gridList as field>
                <#if field.formDict??>
                    <fast-table-column prop="${field.attrName}" label="${field.fieldComment!}"
                                       dict-type="${field.formDict}"></fast-table-column>
                <#else>
                    <el-table-column prop="${field.attrName}" label="${field.fieldComment!}" header-align="center"
                                     align="center">
                        <template slot="header" slot-scope="scope">
                            <el-row>
                                ${field.fieldComment!}<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.hrp_zcbm.bo}}</p>
                            </el-row>
                        </template>
                        <template slot-scope="scope">
                            <el-row>{{ scope.row.${field.attrName}}}</el-row>
                        </template>
                    </el-table-column>
                </#if>
            </#list>
            <el-table-column label="操作" fixed="right" header-align="center" align="center" width="200">
                <template #default="scope">
                    <el-button type="text" link size="small" class="elButton"
                               @click="addOrUpdateHandle(scope.row.id)">
                        {{ZHtranslate.pl_stdxg.zh}}<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.pl_stdxg.bo}}</p>
                    </el-button>
                    <el-button type="text" link size="small" class="elButton"
                               @click="deleteBatchHandle(scope.row.id)">
                        {{ZHtranslate.pl_stdsc.zh}}<p :class="[isClicked?'isShow':'isHide']">{{ZHtranslate.pl_stdsc.bo}}</p>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="page"
                :page-sizes="pageSizes"
                :page-size="limit"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
        >
        </el-pagination>

        <el-dialog title="导入" :visible.sync="importDialogVisible">
            <el-form>
                <el-form-item>
                    <el-button @click="handleDownloadTemplate">下载模板</el-button>
                </el-form-item>
                <el-form-item>
                    <input type="file" accept=".xlsx" @change="fileChange"/>
                </el-form-item>
            </el-form>

            <!-- 弹窗底部按钮 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="importDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleUpload">确认导入</el-button>
            </span>
        </el-dialog>

        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
    </el-card>
</template>

<script>
    import {query, deleteById} from '@/api/${functionName}/${functionName}.js'
    import {Message, MessageBox} from 'element-ui';
    import AddOrUpdate from './add-or-update.vue'


    export default {
        name: "${functionName}",
        components: {
            'add-or-update': AddOrUpdate,
        },
        data() {
            return {
                file: undefined,
                importDialogVisible: false, // 控制导入对话框的显示和隐藏
                ZHtranslate:{},
                    dataList: [],
                    page: 1,
                    limit: 10,
                    total: 0,
                    pageSizes: [10, 15, 20, 30, 50, 100],
                    dataListLoading: false,
                    dataListSelections: [],
                    queryForm: {
                        net: '',
                    }
            }
        },
        computed: {
            isClicked() {
                return this.$store.getters.buttonState
            }
        },
        created() {
            this.ZHtranslate = JSON.parse(sessionStorage.getItem('ZHBOlanguage'))
            this.getDataList()
        },
        methods: {
            fileChange(event){
                this.file = event.target.files[0];
            },
            handleUpload(){
                console.log('a',this.file)
            },
            handleDownloadTemplate(){
                console.log('b')
            },
            handleExport(){
                console.log('c')
            },
            refreshDataList(){
                this.getDataList()
            },
            addOrUpdateHandle  (id)  {
                this.$refs.addOrUpdateRef.init(id)
            },
            getDataList() {
                query({
                    page: this.page,
                    limit: this.limit,
                }).then(res => {
                    this.total = res.data.data.total
                    this.dataList = res.data.data.list
                })
            },

            sizeChangeHandle(val) {
                this.page = 1
                this.limit = val
                this.getDataList()
            },

            currentChangeHandle(val) {
                this.page = val
                this.getDataList()
            },

            // 多选
            handleSelectionChange(selections) {
                this.dataListSelections = selections.map(x => {
                    return x.id
                })
            },

            // 排序
            sortChangeHandle(data) {
                const {prop, order} = data

                if (prop && order) {
                    this.order = prop
                    this.asc = order === 'ascending'
                } else {
                    this.order = ''
                }

                this.getDataList()
            },

            deleteBatchHandle(key) {
                let that = this
                let data = []
                if (key) {
                    data = [key]
                } else {
                    data = this.dataListSelections ? this.dataListSelections : []
                }

                if (data.length === 0) {
                    Message.warning('请选择删除记录')
                    return
                }

                MessageBox.confirm('确定进行删除操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        deleteById(data).then(() => {
                            Message.success('删除成功')
                            that.getDataList()
                        })
                    })
                    .catch(() => {
                    })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .elButton p {
        margin: 5px;
    }
</style>